<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('stats_bus_income')}}</p>
      <div class="wrap-operate-container">
        <div class="wrap-operate-area">
          <div class="operate-select-item">
            <label class="title">{{$t('3XCbmVH_U3ZYTtc5eh9SZ')}}:</label>
            <div class="content">
              <Select
                v-model="agentName"
                style="width: 200px"
                @on-change="changeAgentName"
              >
                <Option
                  v-for="item in allAgents"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </Option>
              </Select>
            </div>
          </div>
          <div class="operate-timepicker-item">
            <label class="title">{{$t('GDfXa14FG03v7f_zmtW5G')}}:</label>
            <div class="content">
              <DatePicker
                v-model="timescope"
                type="datetimerange"
                format="yyyy-MM-dd HH:mm:ss"
                :placeholder="$t('4yP5zHObfE9vFzhk3a6yk')"
                style="width: 300px"
              ></DatePicker>
            </div>
          </div>
          <div class="operate-btn-item">
            <Button class="item" type="info" icon="ios-search" @click="query"
              >{{$t('9ZYL6riI1fheWqEf_uo-M')}}</Button
            >
            <Button class="item" type="info" icon="ios-search" @click="queryAll"
              >{{$t('f7u5SVI8nqzC30FidXe3N')}}</Button
            >
            <Button
              class="item"
              type="info"
              icon="ios-card"
              @click="exportExcel"
              >{{$t('ssHl1qTS2oMuNp3RZnkQY')}}</Button
            >
          </div>
        </div>
      </div>
      <Table :loading="loading" :columns="columns" :data="data"></Table>
      <div class="chart-container">
        <div class="chart-title">
          <span class="title">
            <Icon :size="26" type="ios-podium" />{{$t('jUV8GR6GrjMTKFLSZgoko')}}
          </span>
          <span class="btns">
            <RadioGroup v-model="indicator">
              <Radio label="money">{{$t('17iKd_WV9gEGvHctJPdbu')}}</Radio>
              <Radio label="kw">{{$t('LGJ3u5V0ynq-FGyfu5co9')}}</Radio>
              <Radio label="number">{{$t('qOLB_bj-4ZmZ-F3JbKWWI')}}</Radio>
            </RadioGroup>
          </span>
        </div>
        <div class="chart-area">
          <div
            class="chart-wrapper"
            id="chart"
            style="width:100%; height: 500px;"
          ></div>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
import moment from 'moment'
import { getAgentTableData, getStationInfo } from '@/api/data2'
import echarts from 'echarts'

export default {
  name: 'stats_bus_income',
  data () {
    return {
      agentName: '',
      allAgents: [],
      loading: false,
      indicator: 'money',
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: this.$t('M0SWlK7GRCyXb6WvRMZgb'),
          key: 'carNumber'
        },
        {
          title: this.$t('4tDcsdHzHdbuQMK8JiNxq'),
          key: 'chargeNumber'
        },
        {
          title: this.$t('sgO8XTrpDs0hVu2JOZPmp') + '（KW）',
          key: 'chargeKW'
        },
        {
          title: this.$t('DyFHLriFxsvqhbeY8xUPW'),
          key: 'chargeMoney'
        },
        {
          title: this.$t('Ty1ns2epHIaihi82jwUfc'),
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small',
                    icon: 'ios-search'
                  },
                  on: {
                    click: () => {
                      this.searchChargeRecord(params.index)
                    }
                  }
                },
                this.$t('NPE1YNWzGs_fCi4sf8x-p')
              )
            ])
          }
        }
      ],
      data: [],
      timescope: [moment(0, 'HH').toDate(), moment().toDate()]
    }
  },
  mounted () {
    this.getAgentList()
    this.renderChart()
  },
  watch: {
    indicator () {
      this.renderChart()
    }
  },
  methods: {
    async getAgentList () {
      const { code, data, desc } = await getAgentTableData()
      if (code == 200) {
        this.allAgents = data.datalist || []
      } else {
        this.$Message.error(desc)
      }
    },
    changeAgentName () {},
    query () {},
    queryAll () {},
    exportExcel () {},
    searchChargeRecord () {},
    renderChart () {
      this.$nextTick(() => {
        const params = this.getChartParams(this.indicator)
        if (!this._myChart) {
          this._myChart = echarts.init(document.getElementById('chart'))
        }
        this._myChart.setOption(params, true)
      })
    },
    getChartParams () {
      const param = {
        color: ['#7cb5ec'],
        xAxis: {
          type: 'category',
          data: ['2021.01']
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          show: true,
          top: 'bottom'
        },
        series: [
          {
            name: this.$t('DyFHLriFxsvqhbeY8xUPW'),
            data: [],
            type: 'bar'
          }
        ],
        animationDuration: 2000
      }
      if (this.indicator === 'money') {
        _.assign(param, {
          title: {
            text: this.$t('17iKd_WV9gEGvHctJPdbu'),
            left: 'center'
          },
          yAxis: {
            type: 'value',
            name: this.$t('DyFHLriFxsvqhbeY8xUPW'),
            nameLocation: 'center',
            nameGap: 60,
            axisLabel: {
              formatter (value, index) {
                if (value > 1000000) {
                  return value / 1000000 + 'M'
                } else if (value > 1000) {
                  return value / 1000 + 'K'
                } else if (value > 0) {
                  return value
                }
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitNumber: 4
          },
          tooltip: {
            show: true,
            formatter: ({ name, marker, data }) => {
              return name + '<br>' + marker + this.$t('DyFHLriFxsvqhbeY8xUPW') + '：' + data + this.$t('rEwoS7D6EkR6EPGHSq6MU')
            }
          },
          series: [
            {
              data: [744770.37],
              type: 'bar',
              name: this.$t('DyFHLriFxsvqhbeY8xUPW'),
              barWidth: 35
            }
          ]
        })
      } else if (this.indicator === 'kw') {
        _.assign(param, {
          title: {
            text: this.$t('LGJ3u5V0ynq-FGyfu5co9'),
            left: 'center'
          },
          yAxis: {
            type: 'value',
            name: this.$t('sgO8XTrpDs0hVu2JOZPmp'),
            nameLocation: 'center',
            nameGap: 60,
            axisLabel: {
              formatter (value, index) {
                if (value > 1000000) {
                  return value / 1000000 + 'M'
                } else if (value > 1000) {
                  return value / 1000 + 'K'
                } else if (value > 0) {
                  return value
                }
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitNumber: 4
          },
          tooltip: {
            show: true,
            formatter: ({ name, marker, data }) => {
              return name + '<br>' + marker + this.$t('sgO8XTrpDs0hVu2JOZPmp') + '：' + data + this.$t('7HETTJlktsKtCHcOB5fHN')
            }
          },
          series: [
            {
              data: [2044149.52],
              type: 'bar',
              name: this.$t('sgO8XTrpDs0hVu2JOZPmp'),
              barWidth: 35
            }
          ]
        })
      } else if (this.indicator === 'number') {
        _.assign(param, {
          title: {
            text: this.$t('qOLB_bj-4ZmZ-F3JbKWWI'),
            left: 'center'
          },
          yAxis: {
            type: 'value',
            name: this.$t('4tDcsdHzHdbuQMK8JiNxq'),
            nameLocation: 'center',
            nameGap: 60,
            axisLabel: {
              formatter (value, index) {
                if (value > 1000000) {
                  return value / 1000000 + 'M'
                } else if (value > 1000) {
                  return value / 1000 + 'K'
                } else if (value > 0) {
                  return value
                }
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitNumber: 4
          },
          tooltip: {
            show: true,
            formatter: ({ name, marker, data }) => {
              return name + '<br>' + marker + this.$t('4tDcsdHzHdbuQMK8JiNxq') + '：' + data + this.$t('gvvbCXhgboLNspUiEBq7s')
            }
          },
          series: [
            {
              data: [56803],
              type: 'bar',
              name: this.$t('4tDcsdHzHdbuQMK8JiNxq'),
              barWidth: 35
            }
          ]
        })
      }
      return param
    }
  }
}
</script>

<style></style>
